{%- liquid
  assign article_imag_aspect_ratio = article.image.aspect_ratio

  if article.image.aspect_ratio == nil
    assign article_imag_aspect_ratio = 1
  endif
-%}
<div class="mt-6 mt-md-7">
  <article>
    <div class="border-0 card overflow-hidden rounded-2 bg-transparent">
      <div class="row bg-gray-100 gx-0">
        <div class="col-12 col-md-7 article-card-img position-relative">
          <div class="figure-wrapper h-100 overflow-hidden">
            {%- if show_image == true and article.image -%}
              <figure class="ratio ratio-3x2 mb-0 h-100">
                <picture class="picture">
                  <img srcset="
                    {{ article.image.src | img_url: '350x' }} 350w,
                    {{ article.image.src | img_url: '390x' }} 390w,
                    {{ article.image.src | img_url: '420x' }} 420w,
                    {{ article.image.src | img_url: '480x' }} 480w,
                    {{ article.image.src | img_url: '550x' }} 550w,
                    {{ article.image.src | img_url: '700x' }} 700w,
                    {{ article.image.src | img_url: '780x' }} 780w,
                    {{ article.image.src | img_url: '840x' }} 840w,
                    {{ article.image.src | img_url: '1100x' }} 1100w,
                    {{ article.image.src | img_url: '1400x' }} 1400w"
                    src="{{ article.image.src | img_url: 'master' }}"
                    sizes="(min-width: 1440px) 844px, (min-width: 1280px) 624px, (min-width: 1152px) 550px, (min-width: 768px) 441px, (min-width: 576px) 100vw, calc(100vw - 32px)"
                    alt="{{ article.image.src.alt | escape }}"
                    width="{{ article.image.width }}"
                    height="{{ article.image.height }}"
                    loading="lazy"
                    class="w-100 h-100 object-fit-cover"
                  >
                </picture>
              </figure>
            {%- else -%}
              <figure class="ratio ratio-3x2 mb-0 h-100 bg-black" style="--se-bg-opacity: .6;"></figure>
            {%- endif -%}
          </div>
          <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
        </div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="px-4 px-lg-6 px-xl-9 py-5 py-md-7">
            <div class="card-text">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when 'title'-%}
                  <div class="text-muted {% if block.settings.show_author or block.settings.show_date or block.settings.show_tags and article.tags != blank %}mb-2{% endif %} fs-footnote">
                    {% render 'article-author-date-tag',
                      article: article,
                      show_author: block.settings.show_author,
                      show_date: block.settings.show_date,
                      show_tag: block.settings.show_tag
                    %}
                  </div>
                  <h3 class="mb-2 h3 position-relative">
                    {{ article.title | escape }}
                    <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
                  </h3>
                    
                {%- when 'summary'-%}
                  {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
                    <p class="mb-2 ellipsis-2 position-relative">
                      {%- if article.excerpt.size > 0 -%}
                        {{ article.excerpt | strip_html | truncatewords: 60 }}
                      {%- else -%}
                        {{ article.content | strip_html | truncatewords: 60 }}
                      {%- endif -%}
                      <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="stretched-link"></a>
                    </p>
                  {%- endif -%}
                {%- when 'link'-%}
                  <div class="position-relative mt-5 mt-lg-6" style="z-index: 2;">
                    <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}" class="btn btn-outline-primary" style="transition: none;">
                      {{ 'blogs.article.read_more' | t }}
                    </a>
                  </div>
              {%- endcase -%}
            {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</div>